<template>

	<view class="content">
		<view :style="{backgroundImage: 'url('+topImg+')',backgroundSize: '100% 100%'}" style="height: 680rpx;background-repeat: no-repeat;">
			<f-navbar :bgColor="scrollTop>0?'#fff':'rgba(1,1,1,0)'">
				<view slot="left">
					<auth :statue="statue" :userInfo="userInfo" />
				</view>
			</f-navbar>

			<view style="padding: 20rpx;margin-top: 140rpx;">
				<image :src="linkImg" style="width: 100%;" mode="widthFix"  @click="goNav('/pages/sub/hotGoods')"/>
			</view>
		</view>
        
		<view style="padding: 20rpx;z-index: 1000;position: relative;margin-top: -180rpx;">
			<view style="background-color: #FFFFFF;border-radius: 24rpx;width: 100%;min-height: 800rpx;">
				<view class="u-flex u-row-around" style="padding-top: 40rpx;">
					<view class="tab-item" @tap="tabChange(item)" :class="{'tab-item_sel':item.value==tabValue}"
						v-for="(item,index) in tab">
						{{item.label}}
					</view>
				</view>

				<empty v-if="statue==0" :type="0" style="margin-top: 150rpx;" />

				<view class="p-20" v-if="statue!=0">
					<view class="u-flex u-row-between" style="margin-top: 20rpx;margin-bottom: 30rpx;">
						<image src="../../static/icon/t1.png" style="width: 172rpx;height: 32rpx;" />
						<view class="u-flex u-row-left" style="align-items:flex-end;" @click="goNav('/pages/sub/dataDat')">
							<text style="color:#999999;font-size: 24rpx;">查看详情</text>
							<u-icon name="arrow-right" size="24rpx" />
						</view>
					</view>
					<view class="u-flex u-row-between u-flex-wrap ">
						<info-tab class="m-b-20" v-for="(item,index) in infoList" :tab="item" :key="index"></info-tab>
					</view>
				</view>
				<empty v-if="statue==1" :type="1" style="margin-top: 150rpx;" />
				<view  v-if="statue==2">
					<view style="margin-bottom: 20rpx;">
						 <u-tabs :list="navList" @click="getNavId" lineColor='#FF3F3F'></u-tabs>
					</view>
					<view v-if="isEc" style="height: 590rpx;">
						 <EcCanvas ref="myEc" :sale='sale' :wait='dataList[sid].wait' :time='times' :settle="dataList[sid].settle" :total="dataList[sid].total" :isMule="true" :totalN="`总额: ${total}`" :settleN="`退款: ${settle}`" :waitN="`销售: ${wait}`"></EcCanvas>
					</view>
					<view v-else style="height: 400rpx;"></view>
				</view>
			</view>
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;margin:20rpx 0;" v-if="statue==2">
				<view style="display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0 40rpx 0;">
					<image src="https://cdn.yowswl.com/image/admin/2024/02/02/7a7aadc490de4c7ba3b24d792da125050mt02mfq0x.png" mode="" style="width: 172rpx;height: 32rpx;"></image>
					<view style="display: flex;align-items: center;color: #999;font-size: 24rpx;" @click="goNav('/pages/sub/sinData')">
						<view style="margin-right: 6rpx;">查看全部</view>
						<u-icon name="arrow-right" color="#666" size="12"></u-icon>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;margin-bottom:20rpx;">
					<view style="color: #666;font-size: 24rpx;">商品</view>
					<view style="width: 440rpx;">
						<orderBy :optionlist="byList" @change="shopchange" />
					</view>
				</view>
				<view v-for="(item,index) in shopList" :key="index" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 40rpx;">
					<view style="display: flex;align-items: center;">
						<image :src="item.productImage" mode="" style="width:64rpx;height: 64rpx;border-radius: 10rpx;margin-right: 10rpx;"></image>
						<view  style="color: #333;font-size: 22rpx;width: 158rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;">{{item.productName}}</view>
					</view>
					<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.gmv}}</view>
					<view style="font-size: 24rpx;color: #333;width:150rpx;text-align: center;">{{item.bd}}</view>
					<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.totalNum}}</view>
				</view>
			</view>
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;margin:20rpx 0;" v-if="statue==2">
				<view style="display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0 40rpx 0;">
					<image src="https://cdn.yowswl.com/image/admin/2024/02/02/3114996e982e400291c1a293d4968045nj3njkwud6.png" mode="" style="width: 172rpx;height: 32rpx;"></image>
					<view style="display: flex;align-items: center;color: #999;font-size: 24rpx;" @click="goNav('/pages/sub/bd')">
						<view style="margin-right: 6rpx;">查看全部</view>
						<u-icon name="arrow-right" color="#666" size="12"></u-icon>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;margin-bottom:20rpx;">
					<view style="color: #666;font-size: 24rpx;">用户</view>
					<view style="width: 440rpx;">
						<orderBy :optionlist="bdLists" @change="bdchange" />
					</view>
				</view>
				<view v-for="(item,index) in bdList" :key="index" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 40rpx;">
					<view style="display: flex;align-items: center;">
						<image :src="item.avatar" mode="" style="width:64rpx;height: 64rpx;border-radius:50%;margin-right: 10rpx;"></image>
						<view  style="color: #333;font-size: 22rpx;width: 158rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;">{{item.nickname}}</view>
					</view>
					<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.gmv}}</view>
					<view style="font-size: 24rpx;color: #333;width:150rpx;text-align: center;">{{item.totalNum}}</view>
					<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.brokeragePrice}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import {
		getStatisticsDetail,
		getStatisDet
	} from '@/api/statistics.js'
	import {
		getProductTopList,
		getBdInfoList
	} from "@/api/shopAuth.js"
	import infoTab from '@/components/infoTab.vue'
	import {
		checkLogin
	} from '@/api/shop.js'
	import {
		goNav
	} from '@/lib/Comment.js'
	import empty from '@/components/empty.vue'
	import auth from '@/components/auth.vue'
	import navbar from '@/components/baseNavbar.vue'
	import EcCanvas from '@/components/lineEcharts.vue'
	import orderBy from '@/components/jing-orderby/jing-orderby.vue'
	
	export default {
		components: {
			infoTab,
			empty,
			auth,
			navbar,
			EcCanvas,
			orderBy
		},
		data() {
			//1:今天 2：近7天 3：近30天 4：本周 5：本月
			return {
				topImg: '',
				linkImg: '',
				userInfo: {},
				scrollTop:0,
				dataList:[
					{
						wait:[],
						settle:[],
						total:[]
					},
				],
				title:'销售额',
				wait:0,
				settle:0,
				total:0,
				sale:{
					min:0,
					max:''
				},
				times:[],
				sid:0,
				tab: [{
					label: "今天",
					value: 1
				}, {
					label: "近7天",
					value: 2
				}, {
					label: "近30天",
					value: 3
				}, {
					label: "本周",
					value: 4
				}, {
					label: "本月",
					value: 5
				}],
				tabValue: 1,
				statue: 0,
				infoList: [{
					title: '总订单数',
					icon: '../../static/icon/i1.png',
					unit: '单',
					num: 0,
					ratio: 0,
					type: 0
				}, {
					title: '退款单数',
					icon: '../../static/icon/i1.png',
					unit: '单',
					num: 0,
					ratio: 0,
					type: 0
				}, {
					title: '销售单数',
					icon: '../../static/icon/i1.png',
					unit: '单',
					num: 0,
					ratio: 0,
					type: 0
				}, {
					title: '总金额',
					icon: '../../static/icon/i2.png',
					unit: '元',
					num: 0,
					ratio: 0,
					type: 0
				}, {
					title: '退款金额',
					icon: '../../static/icon/i2.png',
					unit: '元',
					num: 0,
					ratio: 0,
					type: 0
				}, {
					title: '销售金额',
					icon: '../../static/icon/i2.png',
					unit: '元',
					num: 0,
					ratio: 0,
					type: 0
				}],
                navList:[
                	{
                		id:0,
                		name:'销售额'
                	},{
                		id:1,
                		name:'订单数'
                	}
                ],
                isEc:true,
				dateType:1,
				params:{
				  limit: 10,
				  page: 1,
				  load: true,
				  orderType:1,
				  byType:1,
				},
				bdparams:{
				  limit: 10,
				  page: 1,
				  load: true,
				  orderType:1,
				  byType:1,
				},
				byList:[
					{
						name: 'GMV',
						value: 1,
						isAsc: false,
						type: 1
					},
					{
						name: '哔滴次数',
						value: 2,
						isAsc: false,
						type: 1
					},
					{
						name: '订单数',
						value: 3,
						isAsc: false,
						type: 1,
					}
				],
				bdLists:[
					{
						name: 'GMV',
						value: 1,
						isAsc: false,
						type: 1
					},
					{
						name: '订单数',
						value: 2,
						isAsc: false,
						type: 1
					},
					{
						name: '佣金',
						value: 3,
						isAsc: false,
						type: 1,
					}
				],
				shopList:[],
				bdList:[]
			}
		},

		onPageScroll(e){
			this.scrollTop = e.scrollTop
			console.log('111',this.scrollTop);
			if(this.scrollTop>400){
				this.isEc=false
			}else{
				this.isEc=true
			}
		},
		onLoad() {
			getConfig("shop_top_image").then(res => {
				this.topImg = res.data.value
			})
			getConfig("shop_home_link").then(res => {
				this.linkImg = res.data.value
			})
            this.getStatis()
			this.resetList()
			this.bresetList()
		},
		onShow() {
			this.check((s) => {
				this.statue = s
				if (s == 2) {
					this.getInfo()
					this.getStatis()
					this.resetList()
					this.bresetList()
				}
			})
		},
		onReady() {


		},
		onHide() {

		},
		// 触底触发
		onReachBottom() {
			// this.getList()
		},
		methods: {
			goNav(url){
				goNav(url)
			},
			goAuth() {
				uni.navigateTo({
					url: "/pages/login/auth"
				})
			},
			shopchange(e){
				console.log('e',e);
				this.params.orderType = e.value
				this.params.byType = e.isAsc?0:1
				this.resetList()
			},
			resetList() {
				this.params.page = 1
				this.shopList = []
				this.getList()
			},
			getList() {
				if (!this.params.load) {
					return;
				}
				this.params.load = false;
				console.log('列表，参数', this.params);
				getProductTopList(this.params).then(res => {
					this.params.page++
					this.shopList = this.shopList.concat(res.data.list)
					this.params.load = true
				})
			
			},
			bdchange(e){
				console.log('e',e);
				this.bdparams.orderType = e.value
				this.bdparams.byType = e.isAsc?0:1
				this.bresetList()
			},
			bresetList() {
				this.bdparams.page = 1
				this.bdList = []
				this.bgetList()
			},
			bgetList() {
				if (!this.bdparams.load) {
					return;
				}
				this.bdparams.load = false;
				console.log('列表，参数', this.bdparams);
				getBdInfoList(this.bdparams).then(res => {
					this.bdparams.page++
					this.bdList = this.bdList.concat(res.data.list)
					this.bdparams.load = true
				})
			
			},
			getStatis(){
				getStatisDet({dateType:this.dateType}).then(res=>{
					console.log('折线',res);
					this.times = res.data.times
					this.sale = res.data.sale
					this.dataList = res.data.dataList
					res.data.dataList[this.sid].wait.forEach(e=>{
						let s = Number(e)
						this.wait += s
					})
					res.data.dataList[this.sid].total.forEach(e=>{
						let s = Number(e)
						this.total += s
					})
					res.data.dataList[this.sid].settle.forEach(e=>{
						let s = Number(e)
						this.settle += s
					})
				})
			},
			check(callBack) {
				let statue = this.$store.getters.isLogin ? 1 : 0;
				let that = this
				if (statue == 1) {
					checkLogin().then(res => {
						if (res.data == null || !res.data.login) {
							statue = 0
						} else if (res.data.isAuth == 1) {
							statue = 2
							that.userInfo = res.data
						}
						callBack(statue)
					})
				} else {
					callBack(statue)
				}
			},
			getInfo() {
				getStatisticsDetail({
					dateType: this.tabValue
				}).then(res => {
					this.infoList[0].ratio = Math.abs(res.data.totalNumRatio)
					this.infoList[0].num = res.data.totalNum
					this.infoList[0].type = res.data.totalNumRatio > 0 ? 0 : 1

					this.infoList[1].ratio = Math.abs(res.data.refundNumRatio)
					this.infoList[1].num = res.data.refundNum
					this.infoList[1].type = res.data.refundNumRatio > 0 ? 0 : 1

					this.infoList[2].ratio = Math.abs(res.data.numRatio)
					this.infoList[2].num = res.data.num
					this.infoList[2].type = res.data.numRatio > 0 ? 0 : 1

					this.infoList[3].ratio = Math.abs(res.data.totalPriceRatio)
					this.infoList[3].num = res.data.totalPrice
					this.infoList[3].type = res.data.totalPriceRatio > 0 ? 0 : 1

					this.infoList[4].ratio = Math.abs(res.data.refundPriceRatio)
					this.infoList[4].num = res.data.refundPrice
					this.infoList[4].type = res.data.refundPriceRatio > 0 ? 0 : 1

					this.infoList[5].ratio = Math.abs(res.data.priceRatio)
					this.infoList[5].num = res.data.price
					this.infoList[5].type = res.data.priceRatio > 0 ? 0 : 1

				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/h5Login"
				})
			},
			tabChange(item) {
				this.tabValue = item.value
				this.dateType = item.value
				if (this.statue == 2) {
					this.getInfo()
					this.getStatis()
					this.resetList()
					this.bresetList()
				}
			},
			getNavId(e){
				console.log('11',e);
				this.sid = e.id
				this.title = e.name
				let nameObj={
					waitN:`预估: ${this.wait}`,
					settleN:`结算: ${this.settle}`,
					totalN:`总: ${this.total}`
				}
				let actuObj={
					wait:this.dataList[e.id].wait,
					settle:this.dataList[e.id].settle,
					total:this.dataList[e.id].total
				}
				this.$refs.myEc.getdetData(nameObj,actuObj);
				console.log('11',e);
			}
		},
		
		onShareAppMessage(res) {

			return {
				title: '来哔滴-商家端',
				path: '/pages/index/index'
			}
		},

		onShareTimeline() {
			return {
				title: '来哔滴-商家端',
				path: '/pages/index/index'
			}
		}

	}
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped lang="scss">
	.tab-item {
		font-size: 24rpx;
		color: #666666;
		background-color: #F5F5F5;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
	}

	.tab-item_sel {
		background-color: #007DF7;
		color: #FFFFFF;
	}
</style>